<template>
	<view class="info">
		<u-form :model="form" ref="uForm">
			<u-form-item label="手机">
				<u-input v-model="form.mobile" />
			</u-form-item>
			<u-form-item label="姓名">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="性别">
				<!-- <u-input v-model="form.gender" @focus='sexShow = true'/> -->
				<div @click='sexShow = true'>{{form.gender === 0 ? '女' : '男'}}</div>
				<u-select v-model="sexShow" :list="sexList" @confirm="confirm"></u-select>
			</u-form-item>
			<u-form-item label="生日">
				<u-input v-model="form.birthday" @focus="show = true" />
			</u-form-item>
		</u-form>
		<u-calendar v-model="show" mode="date" @change="change"></u-calendar>

		<u-button class="submitBtn" type="success" :ripple="true" shape="circle" @click="submit">保存</u-button>
	</view>
</template>

<script>
	import {
		editUser
	} from '../../api/api'

	export default {
		data() {
			return {
				form: {},
				show: false,
				sexShow: false,
				sexList: [{
					value: 0,
					label: '女'
				}, {
					value: 1,
					label: '男'
				}]
			}
		},
		methods: {
			//选择生日
			change(e) {
				this.form.birthday = e.result
			},
			//提交表单
			async submit() {
				const res = await editUser(this.form)
				uni.showToast({
					title: '保存成功'
				})
			},
			//选择性别
			confirm(e) {
				const sex = e[0].value
				this.form.gender = sex
			}
		},
		async onShow() {
			this.form = await getApp().getUserInfo()
		}
	}
</script>

<style scoped lang="scss">
	.info {
		background-color: #fff;
		padding: 0 30upx;

		u-form {
			u-form-item {
				border-bottom: 1px solid #999;
			}
		}
	}
</style>
